<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-item">
            <div class="stat-icon" style="background-color: #409EFF">
              <i class="el-icon-user"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">总用户数</div>
              <div class="stat-value">{{ userCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-item">
            <div class="stat-icon" style="background-color: #67C23A">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">订单总数</div>
              <div class="stat-value">{{ orderCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-item">
            <div class="stat-icon" style="background-color: #E6A23C">
              <i class="el-icon-money"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">酒店总数</div>
              <div class="stat-value">{{ hotelCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-item">
            <div class="stat-icon" style="background-color: #F56C6C">
              <i class="el-icon-chat-dot-round"></i>
            </div>
            <div class="stat-info">
              <div class="stat-title">评论总数</div>
              <div class="stat-value">{{ commentCount }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <div ref="lineChart" style="height: 350px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div ref="pieChart" style="height: 350px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDashboard } from '../api/system/user'

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.9",
      lineChart: null,
      pieChart: null,
      userCount: 0,
      orderCount: 0,
      hotelCount: 0,
      commentCount: 0,
      xData: [],
      yData: [],
      orderTypeList: []
    }
  },
  mounted() {
    this.getDashboardInfo()
  },
  methods: {
    getDashboardInfo() {
      getDashboard().then(res => {
        this.userCount = res.userCount
        this.orderCount = res.orderCount
        this.hotelCount = res.hotelCount
        this.commentCount = res.commentCount
        this.xData = res.orderTrendList.xdata
        this.yData = res.orderTrendList.ydata
        this.orderTypeList = res.orderTypeList
        this.initCharts()
      }).catch(err => {
      })



    },
    initCharts() {
      // 初始化折线图
      this.lineChart = echarts.init(this.$refs.lineChart)
      this.lineChart.setOption({
        title: {
          text: '近7天订单趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.yData,
          type: 'line',
          smooth: true
        }]
      })

      // 初始化饼图
      this.pieChart = echarts.init(this.$refs.pieChart)
      this.pieChart.setOption({
        title: {
          text: '订单类型分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 0,
          left: 'center',
          itemWidth: 20,
          itemHeight: 10
        },
        series: [{
          name: '订单类型',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: true,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: '{b}: {d}%',
            position: 'outside'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '14',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: this.orderTypeList
        }]
      })
    },
    goTarget(href) {
      window.open(href, "_blank")
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  padding: 20px;

  .stat-card {
    margin-bottom: 20px;

    .stat-item {
      display: flex;
      align-items: center;

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 30px;
          color: white;
        }
      }

      .stat-info {
        .stat-title {
          font-size: 14px;
          color: #909399;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
        }
      }
    }
  }

  .chart-row {
    margin-top: 20px;
  }
}
</style>
